<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box {
				width: 30%;
				height: 300px;
				border: 4px solid darkgray;
				
				 position: absolute;
				 display: block;
			}
			
			#top {
				width: 100%;
				height: 10%;
				background: #7C9299;
				color: white;
			}
			
			#kb {
				width: 100%;
				height: 90%;
				background: white;
			}
			
			span {
				float: right;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<div id="top">
				注册信息（可以拖拽） <span> 【关闭】</span>
			</div>
			<div id="kb">

			</div>
		</div>
		<script>
			window.onload=function(){
			var box = document.getElementById('box');
			var top = document.getElementById('top');

			top.onmousedown = function(e) {
				var e = event||window.event;
				var x = e.pageX;
				var y = e.pageY;
				var spaceX = x - box.offsetLeft;
				var spaceY = y - box.offsetTop;

				document.onmousemove = function(e) {
					
				var e = event||window.event;
					var x = e.pageX;
					var y = e.pageY;
					box.style.left = x - spaceX + 'px';
					box.style.top = y - spaceY + 'px';
					if(window.getSelection) {
						window.getSelection().removeAllRanges();
					} else {
						document.selection.empty();
					}
					document.onmouseup = function() {
						document.onmousemove = null;
					};
				}
			};
			};
		</script>
	</body>

</html>